<template>
	<view>
		<!-- 自定义搜索框 -->
		<u-sticky offset-top="0" bgColor="#058e73">
			<view class="head" style="display: flex; justify-content: space-between;">
				<view class="buttonContent" style="flex: 2.5; background: #f8f8f8; height: 35px;
				margin: 10px; border-radius: 20px;">
					<uni-data-select v-model="value" :localdata="range" @change="change"
						:clear="false"></uni-data-select>
				</view>
				<view class="searchBox" style="flex: 7.5;">
					<uni-search-bar @input="input" :radius="100" :value="content" cancelButton="none"></uni-search-bar>
				</view>
			</view>
		</u-sticky>
		<view class="scroll-view-container">

			<!-- 左侧滑轮,一级分类 -->


			<scroll-view scroll-y="true" class="left-container" :style="{height: heigh + 'px'}">
				<block v-for="(item, i) in cityList" :key="i">
					<view :class="['left-scrollt' , i===active? 'active' : '']"
						@tap="$u.debounce(changeLeftLable(item), 500)">
						{{ item.province }}
					</view>
				</block>
			</scroll-view>

			<!-- 右侧滑轮，二级分类 -->


			<scroll-view scroll-y="true" :style="{height: heigh + 'px'}" :scroll-top="scrollTop">
				<view v-for="(item,i) in searArr" :key="i" @click="clickCard(item)">
					<uni-card :isShadow="true" :title="item.purposeLocation" mode="basic" style="margin-bottom: 10px;">
						<view>
							<view style="height: 350rpx;">
								<image style="height: 100%; width: 100%;" mode="aspectFill"
									:src="item.activityImagePath.imgSrc" />
							</view>
							<view class="content-box" style="padding: 10px; line-height: 25px;">
								<text style="font-size: 15px;" class="u-line-1">{{ item.activityName }}</text>
								<text style="font-size: 12px;" class="u-line-2">{{ item.description }}</text>
								<view style="color: red; font-size: 14px;">
									{{ item.price }} ￥/人
								</view>
							</view>
						</view>
					</uni-card>
				</view>
				<view class="contentEmpty">
					<u-empty mode="search" :show="showempty" icon="http://cdn.uviewui.com/uview/empty/search.png"
						text="搜索列表为空">
					</u-empty>
				</view>
				<u-loading-page :loading="loading"></u-loading-page>
				<u-loadmore loadmoreText="实在没有了" color="#d8d8d8" lineColor="#d8d8d8" dashed line />
			</scroll-view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				timerId: null,
				// 当前设备科使用高度
				heigh: 0,
				throttleFlag: true,
				//左侧获取信息列表
				cityList: [{
						id: 0,
						province: '甘肃'
					},
					{
						id: 1,
						province: '美国'
					},
					{
						id: 2,
						province: '新西兰'
					},
					{
						id: 3,
						province: '新加坡'
					},
					{
						id: 4,
						province: '辽宁'
					},
					{
						id: 5,
						province: '江苏'
					},
					{
						id: 6,
						province: '浙江'
					},
					{
						id: 7,
						province: '安徽'
					},
					{
						id: 8,
						province: '福建'
					},
					{
						id: 9,
						province: '江西'
					},
					{
						id: 10,
						province: '北京'
					},
					{
						id: 11,
						province: '天津'
					},
					{
						id: 12,
						province: '香港'
					},
					{
						id: 13,
						province: '江西'
					},
					{
						id: 14,
						province: '贵州'
					},
					{
						id: 15,
						province: '四川'
					},
					{
						id: 16,
						province: '云南'
					},
					{
						id: 17,
						province: '天津'
					},
					{
						id: 18,
						province: '马来西亚'
					},
					{
						id: 19,
						province: '上海'
					},
					{
						id: 20,
						province: '内蒙古'
					}
				],
				searArr: [],
				rightList: [],
				// 设置默认激活项
				active: 0,
				content: '',
				scrollTop: 0,
				navName: '',
				value: 0,
				textSear: '城市',
				range: [{
						value: 0,
						text: "城市"
					},
					{
						value: 1,
						text: "活动名称"
					},
					{
						value: 2,
						text: "关键字"
					},
					{
						value: 3,
						text: "项目"
					},
				],
				status: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了',
				showempty: false,
				loading: true
			};
		},
		onLoad(e) {
			this.navName = e.navName
			const sysInfo = uni.getSystemInfoSync()
			this.heigh = sysInfo.windowHeight
		},
		onReady() {
			this.input(this.navName)
			if (this.navName !== undefined) {
				this.textSear = '项目'
				this.value = 3
				}
		},
		methods: {
			// 光标防抖
			input(value) {
				clearTimeout(this.timerId)
				this.timerId = setTimeout(() => {
					this.content = value
					this.getInfromation()
				}, 500)
			},
			clickCard(item) {
				let activityId = item.id;
				uni.navigateTo({
					url: '/subpkg/detailLine/detailLine?activityId=' + activityId
				})
			},
			change(e) {
				if (this.range[e].text == '') {
					this.textSear = ''
				}
				this.textSear = this.range[e].text
				this.getInfromation()
			},
			// 获取资讯列表
			async getInfromation() {
					if (this.textSear == "项目") {
						const res = await uni.$u.http.post("/user/activity/list", {
							activityType: this.content,
						}, {
							custom: {
								auth: true
							}
						}).then(result => {
							if (result.statusCode !== 200) return uni.$showMsg()
							this.searArr = result.data.data
							if (this.searArr.length === 0) {
								this.loading = true
								setTimeout(() => {
									this.loading = false;
									this.showempty = true
									uni.showToast({
										title: '搜索失败',
										icon: 'error',
										duration: 1000
									})
								}, 1000); // 设置节流时间间隔为1秒
							}
							if (this.searArr.length != 0) {
								this.showempty = false
								this.loading = false
							}
						}).catch(err => {})
					}
				if (this.textSear === "城市") {
					const res = await uni.$u.http.post("/user/activity/list", {
						purposeLocation: this.content,
					}, {
						custom: {
							auth: true
						}
					}).then(result => {
						if (result.statusCode !== 200) return uni.$showMsg()
						this.searArr = result.data.data
						if (this.searArr.length === 0) {
							this.loading = true
							setTimeout(() => {
								this.loading = false;
								this.showempty = true
								uni.showToast({
									title: '搜索失败',
									icon: 'error',
									duration: 1000
								})
							}, 1000); // 设置节流时间间隔为1秒
						}
						if (this.searArr.length != 0) {
							this.showempty = false
							this.loading = false
						}
					}).catch(err => {})
				}
				if (this.textSear === "关键字") {
					const res = await uni.$u.http.post("/user/activity/list", {
						description: this.content,
					}, {
						custom: {
							auth: true
						}
					}).then(result => {
						if (result.statusCode !== 200) return uni.$showMsg()
						this.searArr = result.data.data
						if (this.searArr.length === 0) {
							this.loading = true
							setTimeout(() => {
								this.loading = false;
								this.showempty = true
								uni.showToast({
									title: '搜索失败',
									icon: 'error',
									duration: 1000
								})
							}, 1000); // 设置节流时间间隔为1秒
						}
						if (this.searArr.length != 0) {
							this.showempty = false
							this.loading = false
						}
					}).catch(err => {})
				}
				if (this.textSear === "活动名称") {
					const res = await uni.$u.http.post("/user/activity/list", {
						activityName: this.content,
					}, {
						custom: {
							auth: true
						}
					}).then(result => {
						if (result.statusCode !== 200) return uni.$showMsg()
						this.searArr = result.data.data
						if (this.searArr.length === 0) {
							this.loading = true
							setTimeout(() => {
								this.loading = false;
								this.showempty = true
								uni.showToast({
									title: '搜索失败',
									icon: 'error',
									duration: 1000
								})
							}, 1000); // 设置节流时间间隔为1秒
						}
						if (this.searArr.length != 0) {
							this.showempty = false
							this.loading = false
						}
					}).catch(err => {})
				}
			},
			// 左侧点击事件,将点击获取的i赋值给active，改变激活项
			changeLeftLable(i) {
				if (this.throttleFlag) {
					this.throttleFlag = false;
					setTimeout(() => {
						this.throttleFlag = true;
						// uni.showToast({
						// 	title: '点太快啦',
						// 	icon: 'error',
						// 	duration: 1000
						// })
					}, 1000); // 设置节流时间间隔为1秒
					this.content = i.province
					this.getInfromation()
					// 一级分类激活项
					this.active = i.id
					// 重置滚动条(scrollTop不能赋相同值)
					this.scrollTop = this.scrollTop === 0 ? 1 : 0
				}
			},
		}

	}
</script>

<style lang="scss">
	.scroll-view-container {
		display: flex;

		.left-container {
			width: 60px;
			margin: 10px;

			.left-scrollt {
				background-color: #fff;
				line-height: 40px;
				text-align: center;
				font-size: 12px;

				&.active {
					background-color: #FFFFFF;
					position: relative;

					&::before {
						content: ' ';
						display: block;
						width: 2px;
						height: 25px;
						background-color: #a0cfff;
						position: absolute;
						top: 50%;
						left: 0;
						transform: translateY(-50%);
					}
				}
			}
		}
	}

	.right-scrollt-title {
		font-size: 12px;
		font-weight: bold;
		text-align: center;
		padding: 10px 0;
	}

	.three_box {
		display: flex;
		flex-wrap: wrap;

		.three-content {
			width: 33.33%;
			display: flex;
			//横纵向居中
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-bottom: 10px;

			image {
				width: 60px;
				height: 60px;
			}

			text {
				font-size: 12px;
			}
		}
	}
</style>